import { createLoading } from '/@/components/Loading';
import type { Directive, App } from 'vue';

const loadingDirective: Directive = {
   mounted(el, binding) {
      const tip = el.getAttribute('loading-tip');
      const background = el.getAttribute('loading-background');
      const size = el.getAttribute('loading-size');
      const fullscreen = !!binding.modifiers.fullscreen;
      const instance = createLoading(
         {
            tip,
            background,
            size: size || 'large',
            loading: !!binding.value,
            absolute: !fullscreen,
         },
         fullscreen ? document.body : el,
      );
      el.instance = instance;

   },
   updated(el, binding) {
      const instance = el.instance;
      if (!instance) return;
      instance.setTip(el.getAttribute('loading-tip'));
      if (binding.oldValue !== binding.value) {
         if (binding.oldValue !== binding.value) {
            instance.setLoading?.(binding.value && !instance.loading);
         }
      }
   },
   unmounted(el) {
      el?.instance?.close();
   },
};

export function setupLoadingDirective(app: App) {
   app.directive('loading', loadingDirective);
}

export default loadingDirective;
